<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="/static/js/mui.min.js"></script>
    <link href="/static/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/static/dist/css/sm.min.css">
    <link rel="stylesheet" href="/static/dist/css/sm-extend.min.css">
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <style>
        button {
            float: left;
        }
    </style>
</head>
<body>
<div class="page">
    <header class="mui-bar mui-bar-nav">
        <h1 class="title">收藏单词</h1>
        <button class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"
                onclick="window.location.href='/unit_list'"><span
                class="mui-icon mui-icon-left-nav"></span>首页
        </button>
    </header>
    <nav class="bar bar-tab">
        <a class="tab-item" href="/index">
            <span class="mui-icon mui-icon-flag"></span>
            <span class="tab-label">刷词模式</span>
        </a>
        <a class="tab-item" href="/unit_list">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="tab-label">看词模式</span>
        </a>
        <a class="tab-item" href="/add_word_page">
            <span class="mui-icon mui-icon-compose"></span>
            <span class="tab-label">添加单词</span>
        </a>
    </nav>
    <div class="content">
        <br/>
        <br/>
        <div class="mui-content">
            {% for tuple in words %}
                <div class="mui-card">
                    <a id="icon-star" class=""><span class="mui-icon mui-icon-star-filled collect"
                                                     style="color: orange;float: right;margin-top: 1px;margin-right: 1px"></span></a>
                    <br>
                    <h4 style="text-align: center" class="word_detail">{{ tuple.0 }}</h4>
                    <br>
                    <p style="text-align: center" class="show-unit">点击显示章节</p>
                    <p style="text-align: center" class="unit" hidden>{{ tuple.1 }}</p>
                </div>
            {% endfor %}
        </div>
    </div>


</body>
<script src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script src='/static/dist/js/sm.js'></script>
<script src='/static/dist/js/sm-extend.js'></script>
<script src='/static/dist/layer/layer.js'></script>

<script>


    $(function () {
        $(".show-unit").click(function () {
            console.log("click");
            $(this).hide();
            $(this).next().show();
        });
        $(".word_detail").click(function () {
            let word = $(this).text();
            window.location.href = "https://m.youdao.com/dict?q=" + word + "&le=eng";
        });

        $(".collect").click(function () {
            let unit_name = $(this).parent().parent().children(".unit").text();
            console.log($(this).parent().next().next().text() + " : " + unit_name);
            let word = $(this).parent().next().next().text();
            let this_com = $(this);
            if ($(this).hasClass("mui-icon-star")) {
                {# 收藏 #}
                $.ajax({
                    url: "/star_word?word=" + word + "&unit_name=" + unit_name,
                    method: "GET",
                    success: function () {
                        this_com.removeClass("mui-icon-star");
                        this_com.addClass("mui-icon-star-filled");
                        this_com.attr("style", "color: orange;float: right;margin-top: 1px;margin-right: 1px");
                        mui.toast("收藏成功");
                    }
                })
            } else {
                {# 取消收藏 #}
                $.ajax({
                    url: "/cancel_star_word?word=" + word,
                    method: "GET",
                    success: function () {
                        this_com.removeClass("mui-icon-star-filled");
                        this_com.addClass("mui-icon-star");
                        this_com.attr("style", "color: #7f7f7f;float: right;margin-top: 1px;margin-right: 1px");
                        mui.toast("取消收藏成功");
                        this_com.parent().parent().remove();
                    }
                })
            }
        });
    });
</script>
</html>